<!doctype html>
<html>
    <head>
        <title>HT for Web 分割组件手册</title>
        <meta charset="UTF-8">    
        <meta name="viewport" content="user-scalable=yes, width=1024">
        <style type="text/css"> 
            h1, h2, h3, h4, h5, h6, p, blockquote {
                margin: 0;
                padding: 0;
            }
            body {
                font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
                font-size: 13px;
                line-height: 18px;
                color: #737373;
                background-color: white; 
                margin: 10px 13px 10px 13px;
            }
            table {
                margin: 10px 0 15px 0;
                border-collapse: collapse;
            }
            td,th {	
                border: 1px solid #ddd;
                padding: 3px 10px;
            }
            th {
                padding: 5px 10px;	
            }
            a {
                color: #0069d6;
            }
            a:hover {
                color: #0050a3;
                text-decoration: none;
            }
            a img {
                border: none;
            }
            p {
                margin-bottom: 9px;
            }
            h1, h2, h3, h4, h5, h6 {
                color: #404040;
                line-height: 36px;
            }
            h1 {
                margin-bottom: 18px;
                font-size: 30px;
            }
            h2 {
                font-size: 24px;
            }
            h3 {
                font-size: 18px;
            }
            h4 {
                font-size: 16px;
            }
            h5 {
                font-size: 14px;
            }
            h6 {
                font-size: 13px;
            }
            hr {
                margin: 0 0 19px;
                border: 0;
                border-bottom: 1px solid #ccc;
            }
            blockquote {
                padding: 13px 13px 21px 15px;
                margin-bottom: 18px;
                font-family:georgia,serif;
                font-style: italic;
            }
            blockquote:before {
                content:"\201C";
                font-size:40px;
                margin-left:-10px;
                font-family:georgia,serif;
                color:#eee;
            }
            blockquote p {
                font-size: 14px;
                font-weight: 300;
                line-height: 18px;
                margin-bottom: 0;
                font-style: italic;
            }
            code, pre {
                font-family: Monaco, Andale Mono, Courier New, monospace;
            }
            code {
                background-color: #fee9cc;
                color: rgba(0, 0, 0, 0.75);
                padding: 1px 3px;
                font-size: 12px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
            }
            pre {
                display: block;
                padding: 14px;
                margin: 0 0 18px;
                line-height: 16px;
                font-size: 11px;
                border: 1px solid #d9d9d9;
                white-space: pre-wrap;
                word-wrap: break-word;
            }
            pre code {
                background-color: #fff;
                color:#737373;
                font-size: 11px;
                padding: 0;
            }
            sup {
                font-size: 0.83em;
                vertical-align: super;
                line-height: 0;
            }
            * {
                -webkit-print-color-adjust: exact;
            }
            @media screen and (min-width: 914px) {
                body {
                    width: 854px;
                    margin:10px auto;
                }
            }
            @media print {
                body,code,pre code,h1,h2,h3,h4,h5,h6 {
                    color: black;
                }
                table, pre {
                    page-break-inside: avoid;
                }
            }                        
            iframe{
                width: 100%;
                border: 1px solid #34495E;
                margin: 0;                
            }            
            .logo{
                vertical-align: middle;
            }

        </style>        
        <script>
            function init() {
                var logoSrc = '',
                    logos = document.querySelectorAll('.logo'),
                    i = 0;
                for (; i < logos.length; i++) {
                    logos[i].src = logoSrc;
                }
                
                var iframes = document.querySelectorAll('iframe'),
                    func = function(){};
                for (i=0; i < iframes.length; i++) {
                    var iframe = iframes[i];
                    
                    // a small hack to make it work on android
                    iframe.ontouchstart = func;
                    
                    var div = document.createElement('div');
                    div.innerHTML = '<a href="' + iframe.src + '" target="_blank">独立运行→</a>';
                    iframe.parentNode.insertBefore(div, iframe);
                }   
            }
        </script>    
    </head>
    <body onload="init();">
        <a href="http://www.hightopo.com"><img class="logo"></a>HT for Web 分割组件手册
        <hr style="margin: 1px 0 20px 0">
<p>索引</p>

<ul><li><a href="#ref_overview">概述</a></li><li><a href="#ref_splitview">分割组件</a></li></ul>

<hr/>

<div id="ref_overview"></div>

<h2>概述</h2>

<p><code>HT for Web</code>提供了分割组件类<code>ht.widget.SplitView</code>，分割组件用于左右或上下分割两个子组件，
子组件可为<code>HT</code>框架提供的组件，也可为<code>HTML</code>的原生组件，子组件以<code>position</code>为<code>absolute</code>方式进行绝对定位。</p>

<div id="ref_splitview"></div>

<h2>分割组件</h2>

<p>通过<code>splitView = new ht.widget.SplitView(leftView, rightView, orientation, position);</code>初始化构建一个分割组件对象。
<em> <code>leftView</code>左组件或上组件
</em> <code>rightView</code>右组件或下组件
<em> <code>orientation</code>字符串类型，默认为<code>horizontal</code>或<code>h</code>代表左右分割，可设为<code>vertical</code>或<code>v</code>代表上下分割
</em> <code>position</code>分割位置，默认值为<code>0.5</code>，如果设置值为<code>0~1</code>则按百分比分割，大于<code>1</code>代表左组件或上组件的绝对宽或高，小于<code>1</code>代表右组件或下组件的绝对宽或高</p>

<p>分割组件类<code>ht.widget.SplitView</code>主要可配置属性和函数如下：</p>

<ul><li><code>getLeftVeiw()</code>和<code>setLeftView(view)</code>获取和设置左组件或上组件</li><li><code>getRightVeiw()</code>和<code>setRightView(view)</code>获取和设置右组件或下组件</li><li><code>getOrientation()</code>和<code>setOrientation()</code>获取和设置子组件摆放方向，水平摆放<code>horizontal</code>或<code>h</code>，垂直摆放<code>vertical</code>或<code>v</code></li><li><code>getPosition()</code>和<code>setPosition(position)</code>获取和设置分割位置，默认值为<code>0.5</code>，如果设置值为<code>0~1</code>则按百分比分割，大于<code>1</code>代表左组件或上组件的绝对宽或高，小于<code>1</code>代表右组件或下组件的绝对宽或高</li><li><code>getDividerSize()</code>和<code>setDividerSize(size)</code>获取和设置分隔条大小</li><li><code>getDividerBackground()</code>和<code>setDividerBackground(background)</code>获取和设置分隔条背景色大小</li><li><code>getDragOpacity()</code>和<code>setDragOpacity(opacity)</code>获取和设置分隔条拖拽时透明度，默认值为<code>0.5</code>，可取值为<code>0~1</code></li><li><code>isDraggable()</code>和<code>setDraggable(true)</code>获取和设置是否允许分隔条拖拽，默认为<code>true</code></li><li><code>isTogglable()</code>和<code>setTogglable(false)</code>获取和设置分割点是否可通过点击直接展开和关闭，默认为<code>true</code></li><li><code>getToggleIcon()</code>和<code>setToggleIcon(icon)</code>获取和设置分隔条上的<code>toggle</code>图标，该参数需要设置为矢量格式</li><li><code>getStatus</code>和<code>setStatus(normal/cl/cr)</code>获取和设置<code>toggle</code>状态<ul><li><code>normal</code>代表中间分割状态</li><li><code>cl</code>代表<code>collapse left</code>关闭左组件或上组件</li><li><code>cr</code>代表<code>collapse right</code>关闭右组件或下组件</li></ul></li></ul>

<p><iframe src="examples/example_basic.html" style="height:280px"></iframe></p>

<p>以上例子以<code>div</code>作为子组件，通过<code>div.style.position = &#39;absolute&#39;</code>设置了绝对定位属性，
由于该子组件设置了<code>div.style.border = &#39;10px solid yellow&#39;</code>边框，因此需要将<code>box-sizing</code>属性设置为<code>border-box</code>。</p>

<pre><code>function createDiv(background){
    var div = document.createElement(&#39;div&#39;);  
    div.style.position = &#39;absolute&#39;;                
    div.style.background = background;
    div.style.border = &#39;10px solid yellow&#39;;                
    div.style.setProperty(&#39;box-sizing&#39;, &#39;border-box&#39;, null);
    return div;
}</code></pre>

<p>上组件<code>topView</code>由左右两个<code>div</code>子组件构成，<code>h</code>代表<code>horizontal</code>水平摆放，<code>0.3</code>代表左组件占<code>30%</code>，右组件占<code>70%</code>空间</p>

<pre><code>topView = new ht.widget.SplitView(createDiv(&#39;#1ABC9C&#39;), createDiv(&#39;#9B59B6&#39;), &#39;h&#39;, 0.3);</code></pre>

<p>下组件<code>bottomView</code>也是左右分割两个<code>div</code>组件，但<code>position</code>设置的<code>100</code>值，代表左边组件占用绝对值<code>100</code>的空间</p>

<pre><code>bottomView = new ht.widget.SplitView(createDiv(&#39;#34495E&#39;), createDiv(&#39;#E74C3C&#39;), &#39;h&#39;, 100);</code></pre>

<p>整体组件由<code>topView</code>和<code>bottomView</code>垂直摆布构成，<code>v</code>代表<code>vertical</code>垂直摆放，<code>-100</code>代表下组件占用绝对值<code>100</code>的空间</p>

<pre><code>mainView = new ht.widget.SplitView(topView, bottomView, &#39;v&#39;, -100);</code></pre>

<p><iframe src="examples/example_toggle.html" style="height:280px"></iframe></p>

<p>通过<code>topView.setDividerSize(8)</code>加粗分隔条，通过<code>topView.setDividerBackground(&#39;#EEEEEE&#39;)</code>改变分隔条背景。</p>

<pre><code>topView.setDividerSize(8);
topView.setDividerBackground(&#39;#EEEEEE&#39;);</code></pre>

<p>通过<code>bottomView.setTogglable(false)</code>关闭<code>toggle</code>功能，通过<code>bottomView.setDraggable(false);</code>关闭分隔条拉动功能。</p>

<pre><code>bottomView.setDividerSize(2);
bottomView.setDividerBackground(&#39;#EEEEEE&#39;);
bottomView.setTogglable(false);
bottomView.setDraggable(false);</code></pre>

<p>通过<code>mainView.setTogglable(false)</code>关闭<code>toggle</code>功能，只保留分割条拉动功能。</p>

<pre><code>mainView.setDividerSize(8);
mainView.setDividerBackground(&#39;#EEEEEE&#39;);
mainView.setTogglable(false);</code></pre>

<p>通过定义子组件的<code>onLayouted</code>函数可监听<code>SplitView</code>对子组件的布局事件。</p>

<pre><code>div.onLayouted = function(x, y, width, height){
    div.innerHTML = &#39;width:&#39; + width + &#39; height:&#39; + height;
};</code></pre>    <hr id="contact" style="margin: 20px 0 1px 0">
    <a href="http://www.hightopo.com"><img class="logo"></a>欢迎交流 <a href="mailto:service@hightopo.com">service@hightopo.com</a>
</body>
</html>
